<template>
  <h2>readonly 与 shallowReadonly</h2>
  <hr />
  <h3>state:{{ state2 }}</h3>
  <button @click="update"></button>
</template>
<script lang="ts">
import { defineComponent, reactive, readonly, shallowReadonly, shallowRef } from "vue";
export default defineComponent({
  name: "App",
  /**
   * readonly:深度只读数据
获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理。
只读代理是深层的：访问的任何嵌套 property 也是只读的。
shallowReadonly:浅只读数据
创建一个代理，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换
   */
  setup() {
    const state = reactive({
      name: "刘学奇",
      age: 10,
      car: {
        name: "钟依雨",
        age: 10,
      },
    });
    // 深度只读
    // const state2 = readonly(state);
    const state2 = shallowReadonly(state);
    const update = () => {
      state2.car.name += "==";
    };
    return { state2, update };
  },
});
</script>

<style>
</style>
